<script lang="ts" setup>
import { computed, defineEmits, ref, watch } from "vue"
import NP from "number-precision"
const emit = defineEmits(["movestart", "moving", "moveend", "update:modelValue", "change", "click"])
const props = defineProps({
  value: {
    type: Array,
    default: () => [],
  },
  min: {
    type: Number,
    default: 1,
  },
  max: {
    type: Number,
    default: 100,
  },
  step: {
    type: Number,
    default: 1,
  },
})
const trackRef = ref()
const trackRect = ref()

const trackList = computed(() => {
  const valueList = props.value
  if (!valueList.length) return []
  const result = valueList.map((value, index) => {
    const [start, end] = Array.isArray(value) ? value : []
    if (!start && !end) return null
    const left = getOffsetPercent(start, [props.min, props.max])
    const right = getOffsetPercent(end || props.max, [props.min, props.max])
    return {
      left: `${left}%`,
      // right: getOffsetPercent(props.max + props.min - end, [props.min, props.max]),
      width: `${right - left}%`,
    }
  })

  return result.filter((item) => item)
})
const getOffsetPercent = (value: number, [min, max]: [number, number]): number => {
  const percent = Math.max((value - min) / (max - min), 0)
  //   return `${NP.round(percent * 100, 2)}%`
  return NP.round(percent * 100, 2)
}

// 通过坐标获取value值
const getValueByCoords = (x: number): number => {
  if (!trackRect.value) {
    return 0
  }
  const { left, width } = trackRect.value

  const trackLength = width

  const stepLength = (trackLength * props.step) / (props.max - props.min)
  let diff = x - left
  if (diff < 0) diff = 0
  if (diff > trackLength) diff = trackLength

  // 根据diff计算步数
  const steps = Math.round(diff / stepLength)

  return NP.plus(props.min, NP.times(steps, props.step))
}

const onTrackItemClickHandle = (e: MouseEvent) => {
  const { clientX } = e
  if (trackRef.value) {
    trackRect.value = trackRef.value.getBoundingClientRect()
  }

  const result = getValueByCoords(clientX)
  //   emit("update:modelValue", result)
  console.log(result, "000")

  emit("change", result)
}
</script>

<template>
  <div class="slider">
    <div ref="trackRef" class="slider-track">
      <!-- <div class="slider-bar"></div> -->
      <!-- {{ trackList }} -->
      <div
        v-for="(item, index) in trackList"
        :key="index"
        :style="item"
        class="slider-bar bg-blue-700 h-full"
        @click="onTrackItemClickHandle"
      ></div>
    </div>
  </div>
</template>
<style scoped>
.slider {
  --slider-bar-height: 14px;
  --slider-btn-height: 14px;
  --slider-bg: #f2f4f7;
  --slider-bar-color: #9f7cf0;
  --slider-dot-color: var(--slider-bar-color);
  width: 100%;
  position: relative;
}
.slider-track {
  position: relative;
  height: var(--slider-bar-height);
  /* background-color: #cecece; */
  background-color: var(--slider-bg);
  border-radius: var(--slider-bar-height);
  overflow: hidden;
}

.slider-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--slider-bar-height);
  /* border-radius: calc(var(--slider-bar-height) / 2); */
  border-radius: var(--slider-bar-height);

  background-color: var(--slider-bar-color);
}
</style>
